<template>
  <div class="good-list-container">
    <search @search="handleSearch"></search>
    <div class="main-box">
      <div class="content-wrapper">
        <div class="category-section">
          <h2 class="category-title">
            <i class="iconfont icon-fenlei"></i>
            选择商品分类
          </h2>
          <!--      类别菜单-->
          <div class="category-grid">
            <div v-for="(item, index) in icons" :key="index" class="category-group">
              <div class="category-icon">
                <i class="iconfont" v-html="item.value"></i>
              </div>
              <div class="category-links">
                <span v-for="(category, index2) in item.categories" :key="index2">
                  <a
                    href="#"
                    @click.prevent="load(category.id)"
                    :class="{
                      'category-link active': categoryId == category.id,
                      'category-link': categoryId != category.id,
                    }"
                  >
                    {{ category.name }}
                  </a>
                  <span v-if="index2 != item.categories.length - 1" class="separator"> / </span>
                </span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="divider"></div>
        
        <div class="products-section">
          <div class="products-grid">
            <div
              v-for="good in good"
              :key="good.id"
              class="product-card-wrapper"
            >
              <!--            商品格子-->
              <router-link :to="'goodview/' + good.id" class="product-link">
                <div class="product-card">
                  <div class="product-image-container">
                    <img
                      :src="baseApi + good.imgs"
                      class="product-image"
                      :alt="good.name"
                    />
                    <div class="product-overlay">
                      <i class="iconfont icon-chakan"></i>
                    </div>
                  </div>
                  <div class="product-info">
                    <h3 class="product-name">{{ good.name }}</h3>
                    <div class="product-price">
                      <span class="price-symbol">￥</span>
                      <span class="price-value">{{ good.price }}</span>
                    </div>
                  </div>
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
      
      <!--      分页-->
      <div class="pagination-container">
        <el-pagination
          background
          :hide-on-single-page="false"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
          @current-change="handleCurrentPage"
          class="custom-pagination"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import search from "../../../components/Search";

export default {
  name: "GoodList",
  data() {
    return {
      //分类icon，每个icon包含id、value、categories对象数组.category：id，name
      icons: [],
      total: 0,
      pageSize: 9,
      currentPage: 1,
      //选择的分类
      categoryId: Number,
      //搜索的内容
      searchText: "",
      good: [],
      baseApi: this.$store.state.baseApi,
    };
  },
  components: {
    search,
  },
  created() {
    //二者一般不同时存在
    this.searchText = this.$route.query.searchText;
    this.categoryId = this.$route.query.categoryId;

    this.loadCategories();
    this.load();
  },
  methods: {
    loadCategories() {
      this.request.get("/api/icon").then((res) => {
        if (res.code === "200") {
          this.icons = res.data;
        }
      });
    },
    handleCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.load();
    },
    handleSearch(text) {
      this.searchText = text;
      this.load();
    },
    load(categoryId) {
      if (categoryId != undefined) {
        this.categoryId = categoryId;

        this.$router.push({
          path: "/goodlist",
          query: { categoryId: this.categoryId },
        });
      }
      this.request
        .get("/api/good/page", {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            searchText: this.searchText,
            categoryId: this.categoryId,
          },
        })
        .then((res) => {
          if (res.code === "200") {
            this.total = res.data.total;
            this.good = res.data.records;
            
          }
        });
    },
  },
};
</script>

<style scoped>
.good-list-container {
  min-height: 100vh;
  padding: 0 0 20px 0;
}

.main-box {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 20px;
}

.content-wrapper {
  margin: 0 auto;
}

/* 分类区域样式 */
.category-section {
  margin-bottom: 30px;
}

.category-title {
  font-size: 28px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.category-title i {
  color: #667eea;
  font-size: 24px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.category-group {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
  transition: all 0.3s ease;
}

.category-group:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
}

.category-icon {
  text-align: center;
  margin-bottom: 15px;
}

.category-icon i {
  font-size: 32px;
  color: #ffffff;
}

.category-links {
  text-align: center;
  font-size: 16px;
}

.category-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 5px 8px;
  border-radius: 8px;
}

.category-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
}

.category-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.3);
  font-weight: 600;
}

.separator {
  color: rgba(255, 255, 255, 0.6);
  margin: 0 5px;
}

.divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, #667eea, transparent);
  margin: 30px 0;
  border-radius: 1px;
}

/* 商品区域样式 */
.products-section {
  margin-bottom: 30px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}

.product-card-wrapper {
  transition: all 0.3s ease;
}

.product-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.product-card {
  background: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.product-image-container {
  position: relative;
  overflow: hidden;
  height: 250px;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

.product-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
}

.product-card:hover .product-overlay {
  opacity: 1;
}

.product-overlay i {
  color: #ffffff;
  font-size: 32px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 15px;
  backdrop-filter: blur(10px);
}

.product-info {
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.product-name {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 10px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.price-symbol {
  color: #e74c3c;
  font-size: 16px;
  font-weight: 600;
}

.price-value {
  color: #e74c3c;
  font-size: 22px;
  font-weight: 700;
}

/* 分页样式 */
.pagination-container {
  text-align: center;
  margin-top: 40px;
}

.custom-pagination {
  display: inline-block;
}

.custom-pagination .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #667eea;
  color: #ffffff;
}

.custom-pagination .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #667eea;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-box {
    margin: 10px;
    padding: 20px;
  }
  
  .category-grid {
    grid-template-columns: 1fr;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
  }
  
  .category-title {
    font-size: 24px;
  }
}
</style>